<template>
  <div class="w-full p-6 flex h-full bg-bg">
    <div class="w-full rounded-md">
      <div class="flex flex-row justify-between mb-4">
        <el-input
          v-model="search"
          placeholder="根据标题进行搜索"
          prefix-icon="el-icon-search"
          @change="searchChange"
        ></el-input>
      </div>
      <vxe-table
        align="center"
        :data="awardList"
        :loading="loading"
        round
        border
      >
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="id" :visible="false"> </vxe-column>
        <vxe-column field="title" title="标题"></vxe-column>
        <vxe-column field="type" title="类型"></vxe-column>
        <vxe-column field="staffName" title="上传人"></vxe-column>
        <vxe-column title="操作" width="100" show-overflow>
          <template #default="{ row }">
            <vxe-button
              type="text"
              icon="fa fa-trash-o"
              @click="deleteEvent(row)"
            ></vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
      <div class="flex flex-row justify-between mt-4">
        <el-button :disabled="!pageInfo.hasPre" @click="prePage"
          >上一页</el-button
        >
        <p>{{ pageInfo.current }}</p>
        <el-button :disabled="!pageInfo.hasNext" @click="nextPage"
          >下一页</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted, reactive, ref } from "vue";
import VXETable from "vxe-table";
import {
  AwardPage,
  AwardUpdateDTO,
  deleteAward,
  pageAward,
  selectAwardByTitle
} from "/@/api/award";
import { errorMessage, successMessage } from "/@/utils/message";

export default {
  setup() {
    const loading = ref(true);
    const pageInfo = reactive({
      current: 1,
      size: 10,
      hasPre: false,
      hasNext: true
    });
    const search = ref("");
    const awardList = ref<AwardUpdateDTO[]>([]);

    const searchPage = async () => {
      const res = await selectAwardByTitle(
        search.value,
        pageInfo.current,
        pageInfo.size
      );
      if (res.code === 1) {
        const data = res.response as AwardPage;
        pageInfo.hasPre = data.hasPre;
        pageInfo.hasNext = data.hasNext;
        awardList.value = data.awardList;
      }
    };

    const searchChange = async () => {
      pageInfo.current = 1;
      let res = null;
      if (search.value === "") {
        res = await getAwardList();
      } else {
        res = await selectAwardByTitle(
          search.value,
          pageInfo.current,
          pageInfo.size
        );
      }
      if (res.code === 1) {
        const data = res.response as AwardPage;
        pageInfo.hasPre = data.hasPre;
        pageInfo.hasNext = data.hasNext;
        awardList.value = data.awardList;
      }
    };
    const deleteEvent = async row => {
      VXETable.modal
        .confirm("您确定要删除 " + row.title + "?")
        .then(async type => {
          if (type === "confirm") {
            const res = await deleteAward(row.id);
            if (res.code === 1) {
              successMessage(res.message);
              getAwardList();
            } else {
              errorMessage(res.message);
            }
          }
        });
    };
    const prePage = () => {
      if (pageInfo.hasPre) {
        pageInfo.current--;
        if (search.value === "") {
          getAwardList();
        } else {
          searchPage();
        }
      }
    };
    const nextPage = () => {
      if (pageInfo.hasNext) {
        pageInfo.current++;
        if (search.value === "") {
          getAwardList();
        } else {
          searchPage();
        }
      }
    };
    const getAwardList = async () => {
      const res = await pageAward(pageInfo.current, pageInfo.size);
      if (res.code === 1) {
        const data = res.response as AwardPage;
        pageInfo.hasPre = data.hasPre;
        pageInfo.hasNext = data.hasNext;
        awardList.value = data.awardList;
        loading.value = false;
      } else {
        errorMessage(res.message);
      }
    };

    onMounted(() => {
      getAwardList();
    });
    return {
      loading,
      pageInfo,
      search,
      awardList,
      searchChange,
      deleteEvent,
      prePage,
      nextPage
    };
  }
};
</script>

<style scoped></style>
